<div id="useredit" class="mdl-grid" ng-controller="userEditCtrl">
    <div class="p-section" style="padding: 30px;">
        <div class="announcements">
            请注意设定用户角色与用户权限
        </div>

        <form action="" id="myform"  name="myform" novalidate>
            <div class="mdl-grid" style="padding: 20px; border: 1px solid #ededed;">
                <div class="mdl-cell mdl-cell--4-col">
                    <h6 class="form-title">用户基本信息</h6>
                    <div ng-class="['mdl-textfield', 'mdl-js-textfield', 'mdl-textfield--floating-label',
                        {'is-dirty is-focused': userNew.username},{'is-invalid': myform.username.$invalid && submitted }]">
                        <input class="mdl-textfield__input" type="text" name="username" ng-model="userNew.username" required>
                        <label class="mdl-textfield__label">账号</label>
                        <span class="mdl-textfield__error">必填项</span>
                        <div class="input-icon"><i class="material-icons">account_circle</i></div>
                    </div>
                    <div ng-class="['mdl-textfield', 'mdl-js-textfield', 'mdl-textfield--floating-label',
                        {'is-dirty is-focused': userNew.password},{'is-invalid': myform.password.$invalid && submitted }]">
                        <input class="mdl-textfield__input" type="password" name="password" ng-model="userNew.password" required>
                        <label class="mdl-textfield__label">密码</label>
                        <span class="mdl-textfield__error">必填项</span>
                        <div class="input-icon"><i class="material-icons">lock</i></div>
                    </div>
                    <div ng-class="['mdl-textfield', 'mdl-js-textfield', 'mdl-textfield--floating-label',
                        {'is-dirty is-focused': userNew.compwd},{'is-invalid': myform.compwd.$invalid && submitted }]">
                        <input class="mdl-textfield__input" type="password" name="compwd" ng-model="userNew.compwd" required>
                        <label class="mdl-textfield__label">密码确认</label>
                        <span class="mdl-textfield__error">两次输入的密码不一致</span>
                    </div>
                    <div ng-class="['mdl-textfield', 'mdl-js-textfield', 'mdl-textfield--floating-label',
                        {'is-dirty is-focused': userNew.name},{'is-invalid': myform.name.$invalid && submitted }]" required>
                        <input class="mdl-textfield__input" type="text" name="name" ng-model="userNew.name">
                        <label class="mdl-textfield__label">姓名</label>
                        <span class="mdl-textfield__error">必填项</span>
                        <div class="input-icon"><i class="material-icons">person</i></div>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect is-checked">
                            <input type="radio" class="mdl-radio__button" name="sexy" value="1"
                                   ng-model="userNew.sexy" checked>
                            <span class="mdl-radio__label">男</span>
                        </label>
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
                            <input type="radio" class="mdl-radio__button" name="sexy" value="2"
                                   ng-model="userNew.sexy">
                            <span class="mdl-radio__label">女</span>
                        </label>
                    </div>
                    <div ng-class="['mdl-textfield', 'mdl-js-textfield', 'mdl-textfield--floating-label',
                        {'is-dirty is-focused': userNew.summary}]">
                        <textarea class="mdl-textfield__input" type="text" rows="3" name="summary" ng-model="userNew.summary"></textarea>
                        <label class="mdl-textfield__label">简介</label>
                    </div>
                </div>
                <div class="mdl-cell mdl-cell--4-col">
                    <h6 class="form-title">角色设置</h6>
                    <div ng-class="['mdl-textfield', 'mdl-js-textfield', 'mdl-textfield--floating-label',
                        {'is-dirty is-focused': userNew.role}]">
                        <input class="mdl-textfield__input" type="text" ng-model="userNew.role" readonly>
                        <label class="mdl-textfield__label">角色</label>
                        <div class="input-icon"><i class="material-icons">group_add</i></div>
                    </div>
                    <!--tree-->
                    <div render-tree source="add"></div>
                </div>
                <!--头像上传组件-->
                <sculp-ture></sculp-ture>
            </div>

            <div class="mdl-grid">
                <div class="mdl-cell mdl-cell--12-col" style="text-align: center">
                    <button type="button" ng-click="addUser(myform.$valid)" class="button button-glow button-rounded button-raised button-primary">保存并提交</button>
                    <a ui-sref="user" class="button button-border button-rounded">返回用户列表</a>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/avBackend/src/js/usercommon.js"></script>
<script>
    /*
    var source = [
        { value: 10, icon: '/avBackend/src/images/administrator.png', label: '角色1' },
        { value: 11, icon: '/avBackend/src/images/administrator.png', label: '角色2' },
        { value: 20, icon: '/avBackend/src/images/administrator.png', label: '角色3' },
        { value: 21, icon: '/avBackend/src/images/administrator.png', label: '角色4' },
        { value: 30, icon: '/avBackend/src/images/administrator.png', label: '角色5' }
    ]

    $('#role_manage').jqxTree({
        theme: 'metro',
        source: source,
        width: 300,
        checkboxes: true
    })
    */
</script>